<template>
  <div class="tree">
    <div style="height:40px; background-color:#ebecf1">
      <div style="width:100px;padding-top:10px;padding-left:20px">预算单位</div>
    </div>
    <el-input
      v-model="treeQuery"
      suffix-icon="el-icon-search"
      size="small"
      class="treeInput"
    />
    <el-tree
      ref="tree"
      node-key="code"
      :highlight-current="true"
      :accordion="true"
      :data="agencyTreeData"
      :props="defaultProps"
      :default-expanded-keys="['0']"
      :filter-node-method="filterNode"
      @node-click="handleNodeClick"
    />
  </div>
</template>
<script>
import { getAuthAgencyTree, getFirstAuthAgencyData } from '@/api/baseInfo'
export default {
  //  name: "AgencyTree",
  data() {
    return {
      agencyTreeData: [],
      firstAuthAgencyData: {},
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      treeQuery: ''
    }
  },
  watch: {
    treeQuery(val) {
      this.$refs.tree.filter(val)
    }
  },
  created() {
    this.getTreeData()
    this.getFirstAuthAgencyData()
  },
  methods: {
    getFirstAuthAgencyData() {
      getFirstAuthAgencyData().then(res => {
        this.$emit('getFirstAuthAgencyData', res.data)
      })
    },
    getTreeData() {
      getAuthAgencyTree().then(response => {
        this.agencyTreeData = response.data
      })
    },
    // 树查询过滤
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    // 选择树
    handleNodeClick(data) {
      this.$emit('handleTreeQuery', data)
      // if (!Object.prototype.hasOwnProperty.call(data, 'children')) {
      // }
    }
  }
}
</script>
<style lang="scss" scoped>
.agencyTree {
    .el-input {
      width: 100% !important;
      height: 40px !important;
      .el-input__inner{
        height: 35px;
      }
    }
}

</style>
